<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tab按钮测试</title>
    <style>
        body {
            background: #1a1a1a;
            color: white;
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .test-section {
            margin: 20px 0;
            padding: 20px;
            background: #2a2a2a;
            border-radius: 8px;
        }
        button {
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            background: #3a3a3a;
            border-radius: 4px;
        }
        .success {
            color: #4caf50;
        }
        .error {
            color: #f44336;
        }
    </style>
</head>
<body>
    <h1>🔧 右侧Tab按钮测试工具</h1>
    
    <div class="test-section">
        <h2>1. DOM元素检查</h2>
        <button onclick="checkDOM()">检查DOM元素</button>
        <div id="dom-result" class="result"></div>
    </div>
    
    <div class="test-section">
        <h2>2. Tab按钮检查</h2>
        <button onclick="checkTabButtons()">检查Tab按钮</button>
        <div id="tabs-result" class="result"></div>
    </div>
    
    <div class="test-section">
        <h2>3. 面板检查</h2>
        <button onclick="checkPanels()">检查面板</button>
        <div id="panels-result" class="result"></div>
    </div>
    
    <div class="test-section">
        <h2>4. 管理器检查</h2>
        <button onclick="checkManager()">检查管理器</button>
        <div id="manager-result" class="result"></div>
    </div>
    
    <div class="test-section">
        <h2>5. 手动打开面板</h2>
        <button onclick="openTransformPanel()">打开Transform面板</button>
        <button onclick="openModelLibraryPanel()">打开模型库面板</button>
        <div id="open-result" class="result"></div>
    </div>
    
    <script>
        function checkDOM() {
            const result = document.getElementById('dom-result');
            const checks = [];
            
            const tabsBar = document.getElementById('right-tabs-bar');
            checks.push(`Tab按钮栏: ${tabsBar ? '✅ 存在' : '❌ 不存在'}`);
            
            const transformPanel = document.getElementById('transform-panel');
            checks.push(`Transform面板: ${transformPanel ? '✅ 存在' : '❌ 不存在'}`);
            
            const modelLibPanel = document.getElementById('model-library-panel-content');
            checks.push(`模型库面板: ${modelLibPanel ? '✅ 存在' : '❌ 不存在'}`);
            
            result.innerHTML = checks.join('<br>');
        }
        
        function checkTabButtons() {
            const result = document.getElementById('tabs-result');
            const buttons = document.querySelectorAll('.vertical-tab-btn');
            
            if (buttons.length === 0) {
                result.innerHTML = '<span class="error">❌ 未找到任何Tab按钮</span>';
                return;
            }
            
            const checks = [`找到 ${buttons.length} 个Tab按钮:`];
            buttons.forEach((btn, i) => {
                const panel = btn.dataset.panel;
                checks.push(`  ${i + 1}. data-panel="${panel}"`);
            });
            
            result.innerHTML = checks.join('<br>');
        }
        
        function checkPanels() {
            const result = document.getElementById('panels-result');
            const panels = document.querySelectorAll('.right-panel');
            
            if (panels.length === 0) {
                result.innerHTML = '<span class="error">❌ 未找到任何.right-panel</span>';
                return;
            }
            
            const checks = [`找到 ${panels.length} 个面板:`];
            panels.forEach((panel, i) => {
                checks.push(`  ${i + 1}. id="${panel.id}" data-panel="${panel.dataset.panel}"`);
                checks.push(`      display: ${getComputedStyle(panel).display}`);
            });
            
            result.innerHTML = checks.join('<br>');
        }
        
        function checkManager() {
            const result = document.getElementById('manager-result');
            const checks = [];
            
            if (window.rightToolbarManager) {
                checks.push('✅ window.rightToolbarManager 存在');
                checks.push(`   类型: ${typeof window.rightToolbarManager}`);
                if (window.rightToolbarManager.instance) {
                    checks.push('   ✅ instance 存在');
                } else {
                    checks.push('   ❌ instance 不存在');
                }
            } else {
                checks.push('<span class="error">❌ window.rightToolbarManager 不存在</span>');
            }
            
            if (window.closeRightPanel) {
                checks.push('✅ window.closeRightPanel 函数存在');
            } else {
                checks.push('<span class="error">❌ window.closeRightPanel 不存在</span>');
            }
            
            result.innerHTML = checks.join('<br>');
        }
        
        function openTransformPanel() {
            const result = document.getElementById('open-result');
            try {
                if (window.rightToolbarManager && window.rightToolbarManager.instance) {
                    window.rightToolbarManager.instance.openPanel('transform');
                    result.innerHTML = '<span class="success">✅ 尝试打开Transform面板，请查看控制台日志</span>';
                } else {
                    result.innerHTML = '<span class="error">❌ 管理器不存在</span>';
                }
            } catch (e) {
                result.innerHTML = `<span class="error">❌ 错误: ${e.message}</span>`;
            }
        }
        
        function openModelLibraryPanel() {
            const result = document.getElementById('open-result');
            try {
                if (window.rightToolbarManager && window.rightToolbarManager.instance) {
                    window.rightToolbarManager.instance.openPanel('model-library');
                    result.innerHTML = '<span class="success">✅ 尝试打开模型库面板，请查看控制台日志</span>';
                } else {
                    result.innerHTML = '<span class="error">❌ 管理器不存在</span>';
                }
            } catch (e) {
                result.innerHTML = `<span class="error">❌ 错误: ${e.message}</span>`;
            }
        }
    </script>
</body>
</html>

